import type { IMaterialInfoResponse } from '@/api/marterial';
import { DeleteOutlined, FileSearchOutlined } from '@ant-design/icons';
import { Space, Tag } from 'antd';
import { memo, useCallback } from 'react';

type MaterialItemProps = {
	showDelete?: boolean;
	showDetail?: boolean;
	material: IMaterialInfoResponse;
	onDetail?: (material: IMaterialInfoResponse) => void;
	onDelete?: (material: IMaterialInfoResponse) => void;
};

const MaterialItem: React.FC<MaterialItemProps> = ({
	showDelete = true,
	showDetail = true,
	material,
	onDetail,
	onDelete
}) => {
	const handleDetail = useCallback(
		(e: React.MouseEvent<HTMLDivElement>) => {
			e.preventDefault();
			e.stopPropagation(); // 防止触发 Checkbox 的选中
			onDetail?.(material);
		},
		[material, onDetail]
	);

	const handleDelete = useCallback(
		(e: React.MouseEvent<HTMLDivElement>) => {
			e.preventDefault();
			e.stopPropagation(); // 防止触发 Checkbox 的选中
			onDelete?.(material);
		},
		[material, onDelete]
	);

	return (
		<div className="w-full group bg-#fff rounded-4 p-15 pr-5 pb-10 box-border flex justify-between b-1-#e6e6e6 hover:shadow-[0_0_20px_rgba(231,231,231,.8)] transition-shadow duration-300">
			<div className="flex flex-col flex-1 w-0 justify-between mr-10">
				<Space direction="vertical" className="mb-20">
					<p>{material.title}</p>
					<p className=" text-[#666] text-13">{material.chinese_title}</p>
				</Space>
				<p className="text-#999 text-12">
					<span className="mr-40">{material.web_name}</span>
					<span>修改时间：{material.update_time}</span>
				</p>
			</div>
			<div className="w-[25%] min-w-[200px] flex flex-col justify-between">
				<Space className="flex items-center justify-end flex-wrap">
					{material.tags?.split('@').map(tag => (
						<Tag key={tag}>{tag}</Tag>
					))}
				</Space>
				<Space className="flex items-center justify-end mr-10 mt-10 h-[20px]">
					{showDetail && (
						<FileSearchOutlined
							title="详情"
							onClick={handleDetail}
							className="text-16 text-primary cursor-pointer hidden group-hover:block"
						/>
					)}
					{showDelete && (
						<DeleteOutlined
							title="删除"
							className="text-16 text-red cursor-pointer hidden group-hover:block"
							onClick={handleDelete}
						/>
					)}
				</Space>
			</div>
		</div>
	);
};
export default memo(MaterialItem);
